<template>
	<div class="kaoguanguanli">
    <top></top>
    <div class="flexcc">
      <img src="../../../static/img2/banner2.png">
    </div>
    <div class="ww" style="padding: 20px 0 50px;">

      <div style="margin-bottom: 30px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>分销查询</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="background: #fff; width: 100%; border-radius: 10px; padding: 30px; min-height: calc(100vh - 460px);">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="渠道统计" name="first">
            <div class="flexc" style="margin-bottom: 20px;">
              <el-select v-model="search.id"  style=" margin-right: 20px;" placeholder="请选择赛事">
                  <el-option :label="item.name" :value="item.id" v-for="(item,index) in saishis" :key="item.id"></el-option>
              </el-select>
              <el-select v-model="search.channel_id"  style=" margin-right: 20px;" placeholder="请选择渠道">
                  <el-option :label="item.channel_name" :value="item.id" v-for="(item,index) in qudaos" :key="item.id"></el-option>
              </el-select>
              <el-input v-model="search.channel_password" type="password" style=" width: 250px; margin-right: 20px;" placeholder="请输入密码"></el-input>
              <el-button type="primary" round @click='sousuo'>搜索</el-button>
            </div>
            <el-table :data="tableData1"  border  style="width: 100%">
                <el-table-column prop="channel_id" label="ID"></el-table-column>
                <el-table-column prop="channel_name" label="渠道"></el-table-column>
                <el-table-column prop="spread_income" label="返点"></el-table-column>
                <el-table-column prop="spread_players_num" label="总数"></el-table-column>
            </el-table>
            <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="分销人统计" name="second">
            <div class="flexc" style="margin-bottom: 20px;">
              <el-select v-model="search.id"  style=" margin-right: 20px; " placeholder="请选择赛事">
                  <el-option :label="item.name" :value="item.id" v-for="(item,index) in saishis" :key="item.id"></el-option>
              </el-select>
              <el-input v-model="search.phone" style=" margin-right: 20px; " placeholder="请输入手机号"></el-input>
              <div class="flexc">
                 <div style="position: relative;" class="inp200">
                   <el-input v-model="search.sms_code" style=" width: 250px;" placeholder="请输入验证码"></el-input>
                   <div style="position: absolute; right: 10px; top:10px; cursor: pointer; font-size: 12px;" @click="getcode()" >{{daojishiname}}</div>
                 </div>
                 <div style="margin-left: 10px; color: #f00; font-size: 12px;">来自【透明盾】</div>
              </div>

              <!-- <el-input v-model="search.spread_user_id" style=" width: 250px; margin-right: 20px;" placeholder="请输入对应的手机号"></el-input> -->

              <el-button type="primary" round @click='sousuo'>搜索</el-button>
            </div>
            <el-table :data="tableData2"  border  style="width: 100%">
                <!-- <el-table-column prop="user_id" label="ID"></el-table-column> -->
                <el-table-column prop="id_name" label="姓名"></el-table-column>
                <el-table-column prop="spread_income" label="返点"></el-table-column>
                <el-table-column prop="spread_players_num" label="总数"></el-table-column>
            </el-table>
            <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>


	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import top from '../top.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      top
    },
		data() {
			return {
        activeName:'first',
        tableData1:[],
        tableData2:[],
        search:{
          page:1,
          page_size:20,
          id:'',

          channel_id:"",
          channel_password:"",

          phone:"",
          sms_code:""
        },
        total:0,
        saishis:[],
        renyuans:[],
        qudaos:[],

        daojishisv:"",
        daojishiname:'获取验证码',
        daojishi:60,
      }
		},
		created() {

      axios.get(this.IP_URL+'/api/competition/list',{params:{page:1,page_size:2000}}).then((response)=>{
      	if (response.data.msg.code == 0) {
      		this.saishis = response.data.data.data
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })

      // axios.get(this.IP_URL+'/api/user/list',{params:{page:1,page_size:2000}}).then((response)=>{
      // 	if (response.data.msg.code == 0) {
      // 		this.renyuans = response.data.data.data
      // 	} else {
      // 		this.$message.error(response.data.msg.info);
      // 	}
      // })

      axios.get(this.IP_URL+'/api/enrolment/channellist').then((response)=>{
      	if (response.data.msg.code == 0) {

      		this.qudaos = response.data.data
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })

		},
		mounted() {

		},
    beforeDestroy() {

    },
		methods: {

      getcode:function(){
        if(this.search.phone.length != 11){
          this.$message.error('请输入正确手机号');
          return
        }
        if(this.daojishiname != '获取验证码'){
          return
        }
        axios.post(this.IP_URL+'/api/sms/code?phone='+this.search.phone).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.daojishisv = setInterval(()=>{

              if(this.daojishi > 0){
                this.daojishi = this.daojishi - 1
                this.daojishiname = this.daojishi+'秒后再获取'
              }else{
                this.daojishi = 60
                clearInterval(this.daojishisv)
                this.daojishiname = '获取验证码'
              }

            },1000)
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      sousuo:function(){
        this.search.page = 1
        this.getlist()
      },
      handleClick:function(){
        this.search ={
          page:1,
          page_size:20,
          id:'',

          channel_id:"",
          channel_password:"",

          phone:"",
          sms_code:""
        }

      },
      getlist:function(){
        if(this.activeName == 'first'){
          axios.get(this.IP_URL+'/api/competition/spreadchanneldata',{params:this.search}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.tableData1 = [response.data.data]
              // this.total = response.data.data.total
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }else{
          axios.get(this.IP_URL+'/api/competition/spreaduserdata',{params:this.search}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.tableData2 = [response.data.data]
              // this.total = response.data.data.total
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }

      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
    }
	}
</script>


<style scoped >

  /deep/ .el-input{ width: 250px;}
  /deep/ .el-input__inner{ width: 250px;}
</style>
